/* 明亮主题样式 */
@use "../base/variables" as *;
@use "./theme-base" as *;

:root,
[data-theme="light"] {
  @include theme-variables;
  @include light-theme-colors;
}

/* ===== 明亮主题特定样式 ===== */
[data-theme="light"] {
  color-scheme: light;

  /* 页面背景渐变 */
  body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }

  /* 卡片玻璃效果 */
  .glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* 导航栏样式 */
  .navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--color-border-tertiary);
  }

  /* 侧边栏样式 */
  .sidebar {
    background: var(--color-bg-primary);
    border-right: 1px solid var(--color-border-tertiary);
  }

  /* 输入框聚焦效果 */
  .input-focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-lighter);
  }

  /* 按钮悬停效果 */
  .btn-hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  /* 表格斑马纹 */
  .table-striped tr:nth-child(even) {
    background-color: var(--color-bg-quaternary);
  }

  /* 代码块样式 */
  .code-block {
    background: var(--code-bg);
    border: 1px solid var(--color-border-tertiary);
    border-radius: $border-radius-base;
  }

  /* 标签样式 */
  .tag-primary {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light);
  }

  .tag-success {
    background: var(--color-success-lighter);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
  }

  .tag-warning {
    background: var(--color-warning-lighter);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-light);
  }

  .tag-danger {
    background: var(--color-danger-lighter);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-light);
  }

  /* 加载动画 */
  .loading-spinner {
    border: 2px solid var(--color-border-tertiary);
    border-top: 2px solid var(--color-primary);
  }

  /* 分割线 */
  .divider {
    border-color: var(--color-border-tertiary);
  }

  /* 工具提示 */
  .tooltip {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
  }

  /* 下拉菜单 */
  .dropdown-menu {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-tertiary);
    box-shadow: var(--shadow-lg);
  }

  /* 模态框 */
  .modal-backdrop {
    background: var(--color-bg-mask);
  }

  .modal-content {
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-xl);
  }

  /* 通知样式 */
  .notification {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-tertiary);
    box-shadow: var(--shadow-lg);
  }

  /* 进度条 */
  .progress-bar {
    background: var(--color-bg-quaternary);

    .progress-fill {
      background: var(--gradient-primary);
    }
  }

  /* 开关组件 */
  .switch {
    background: var(--color-bg-quaternary);

    &.active {
      background: var(--color-primary);
    }
  }

  /* 选项卡 */
  .tabs {
    border-bottom: 1px solid var(--color-border-tertiary);

    .tab-item {
      color: var(--color-text-secondary);

      &.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
      }

      &:hover {
        color: var(--color-text-primary);
      }
    }
  }

  /* 步骤条 */
  .steps {
    .step-item {
      .step-icon {
        background: var(--color-bg-quaternary);
        color: var(--color-text-tertiary);
        border: 2px solid var(--color-border-secondary);

        &.active {
          background: var(--color-primary);
          color: var(--color-text-inverse);
          border-color: var(--color-primary);
        }

        &.completed {
          background: var(--color-success);
          color: var(--color-text-inverse);
          border-color: var(--color-success);
        }
      }

      .step-line {
        background: var(--color-border-secondary);

        &.completed {
          background: var(--color-success);
        }
      }
    }
  }
}
